<template>
  <div class="leftMain_middle">
    <div class="leftMain_middle_left">
      <div class="leftMain_middle_leftIn">
        <Line />
        <Border />
      </div>
    </div>
    <div class="leftMain_middle_right">
      <div class="leftMain_middle_rightIn">
        <h3>{{ $t('受到攻击环比') }}</h3>
        <div class="biaoge biaoge_bi" style="width:100%; height:9vh" v-for="(item, index) in AttackCount" :key="index">
          <ul>
            <li>
              <div class="liIn">
                <p class="shu shu1">{{ item.num }}</p>
                <p class="zi">{{ item.name }}</p>
              </div>
            </li>
          </ul>
        </div>
        <Border />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Line from './view/Line.vue'
import Border from "~/components/BigScreenPart/view/Border.vue";

import { getAttackCountData } from '~/api/screen'
const AttackCount = ref([])
getAttackCountData().then(res => {
  // console.log(res)
  AttackCount.value = res.data
  // console.log(AttackCount.value)
})
</script>

<style scoped>
.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn {
  min-height: 10px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  min-height: 16px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul {
  display: flex;
  /* display: -webkit-flex; */
  justify-content: center;
  /* 水平居中 */
  /* flex-wrap: wrap; */
  width: 100%;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li {
  width: 33.3%;
  flex: 1;
  /* 平均分配剩余空间 */
  text-align: center;
  /* margin-bottom: 0.05rem; */
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .shu {
  font-size: 0.14rem;
  color: rgba(14, 253, 255, 1);
  font-family: dig, sans-serif;
  /* padding: 0.12rem 0 0.02rem; */
  font-weight: normal;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_bi ul li .zi {
  font-size: 0.06rem;
  color: #fff;
}

/*左边中间部分排行榜*/

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  /* display: -webkit-flex; */

  font-size: 0.08rem;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_left .zi {
  font-size: small;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line {
  border-radius: 2000px;
}

.leftMain_middle .leftMain_middle_right .leftMain_middle_rightIn .biaoge_pai ul li .liIn .liIn_line .line_lineIn {
  border-radius: 100px;
}

</style>